<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平台轮播图设置</title>
    <#include "/header.html">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
    <style>
        th, td {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div v-show="showList">
            <form class="form-inline" style="margin-bottom: 10px">
                <div class="form-group">
                    <select style="height: 34px;" id="selectUserGzhList" v-model="q.gzhCode">

                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" v-model="q.status">
                        <option value="" selected>全部</option>
                        <option value="1">正常</option>
                        <option value="0">停用</option>
                    </select>
                </div>
                <a class="btn btn-info" @click="query"><i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询</a>
                <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;添加</a>
            </form>
            <table id="jqGrid"></table>
            <div id="jqGridPager"></div>
        </div>
        <div v-show="!showList" class="panel panel-default">
            <div class="panel-heading">{{title}}</div>
            <form class="form-horizontal">
                <div class="form-group">
                    <div class="col-sm-2 control-label">ID</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="slideshowinfo.id" placeholder="ID" readonly />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">公众号</div>
                    <div class="col-sm-10">
                        <select class="form-control" id="gzhCode" v-model="slideshowinfo.gzhCode"></select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">图片</div>
                    <div class="col-sm-10">
                        <img id="imgUrl" :src="slideshowinfo.imgUrl" width="100%" height="200px" style="margin-bottom: 6px" />
                        <input type="file" accept="image/*" style="width: 200px;" onchange="insertImgUrl(this)" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">链接地址</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="slideshowinfo.connectUrl" placeholder="链接地址" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">排序</div>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" v-model="slideshowinfo.sort" placeholder="排序" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">状态</div>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" name="status" value="1" v-model="slideshowinfo.status" />正常
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="status" value="0" v-model="slideshowinfo.status" />停用
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">创建日期</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="slideshowinfo.createTime" placeholder="创建日期" readonly />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">修改日期</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="slideshowinfo.modifyTime" placeholder="修改日期" readonly />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-10">
                        <a class="btn btn-primary" @click="saveOrUpdate">保存</a>
                        <a class="btn btn-warning" @click="reload">取消</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="${request.contextPath}/statics/js/modules/sys/slideshowinfo.js"></script>
    <script>
        function insertImgUrl(e) {
            var files = e.files;
            var length = files.length;
            console.log("选择了" + length + "张图片");
            upload(files[0]);
        }

        function upload(file, pathname = 'slideshow') {
            let mini_program_directory = "gzhImg/";
            console.log(file);
            const client = new window.OSS({
                region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
                accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
                accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
                bucket: 'zktuistatic'
            });
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            var datePath =year+""+month+""+day;
            var key = "";
            key=mini_program_directory+pathname+"/"+datePath+"/"+guid()+getFileExtendingName(file.name);
            client.put(key, file).then(function () {
                return client.get(key);
            }).then(function(ret) {
                if(ret.res.status==200 && ret.res.statusCode==200) {
                    console.log(ret.res.requestUrls[0]);
                    vm.slideshowinfo.imgUrl = ret.res.requestUrls[0].replace("http:","https:");
                    $("#imgUrl").attr("src", vm.slideshowinfo.imgUrl);
                }
            }).catch(function(err) {
                console.log(err);
            });
        }

        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                return v.toString(16);
            });
        }

        function getFileExtendingName (filename) {
            // 文件扩展名匹配正则
            var reg = /\.[^\.]+$/;
            var matches = reg.exec(filename);
            if (matches) {
                return matches[0];
            }
            return '';
        }
    </script>
</body>
</html>